<template>
    <view>
        <view class="content">
            <image class="banner" src="/static/images/banner.png" mode="" />
            <view class="menusBox">
                <view class="userinfoBox">
                    <view class="userinfo" style="display: flex;align-items: center;" >{{ userInfo.phone ? userInfo.phone : '欢迎来到玖盛谷~' }}
                        <!-- <text class="user_phone" >{{ userInfo?.phone }}</text> -->
                    </view>
                    <view class="authLoginBtn" @click="goToLogin" v-if="!isLogin">授权登录</view>
                </view>
                <view class="four_box" >
                    <view class="store_item" @tap="goStore" >
                        <view class="imgBox">
                            <image class="iconImg" src="/static/images/nearStore_icon.png" mode="" />
                        </view>
                        <view class="label">附近门店</view>
                        <view class="tips">一键查看 快速开台</view>
                    </view>
                    <view class="store_item" @tap="share">
                        <view class="imgBox">
                            <image class="iconImg" src="/static/images/shopping_icon.png" mode="" />
                        </view>
                        <view class="label">分享</view>
                        <view class="tips">高额奖励</view>
                    </view>
                </view>
            </view>
            <image class="activityImage" style="z-index: 999;" @click="goToPoster" :src="sharePath1" mode="" />
        </view>
        <view class="modal-mask" @click="closeModal" v-if="showModal">
            <view class="modal-content">
                <image src="/static/images/canvasBg.png" class="content-bg" mode="aspectFill"></image>
                <view class="">
                    邀请码
                </view> 
                <image :src="smallCodePath" class="qrcode" mode="" />
                <!-- <view class="qrcode" v-if="isShowQrcode">
                    <view class="qrcodeBox_content_title">
                    会员码
                    </view> 
                    <uqrcode style="margin: 0 auto !important;" ref="uqrcodeImg"  size="200" canvas-id="qrcode" :value="userInfo?.userId" ></uqrcode>
                </view>  -->

            </view> 
            <view class="button-group">
                <button class="groupBtn" open-type="share" @tap="shareToFriend">分享给好友</button>
                <!-- <button class="groupBtn" open-type="share" @tap="shareToFriend">分享到朋友圈</button> -->
                <view class="groupBtn" @click="savePoster" >保存到相册</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onShow,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { getInfo } from '@/api/login'
import { getMiniCodeApi } from '@/api/file'
import { getSharePathApi } from '@/api/index'
import { toast } from '@/utils/common'


// 响应式状态
const showModal = ref(false)
let userInfo = ref({})
let isLogin = ref(false)
const sharePath1 = ref('')
const sharePath2 = ref('')
const isShowQrcode = ref(false)
const uqrcodeImg = ref(null)
// 获取用户信息
const getUserInfo = async () => {
    isLogin.value = uni.getStorageSync('isLogin')
    if (!isLogin.value) {
        //跳转登录
        // uni.reLaunch({
        //     url: '/pages/Login/Login'
        // })
        return
    }
    const res = await getInfo()
    console.log('获取用户信息',res)
     //获取本地用户信息
    if (res.code === 200) {
        userInfo.value = res.result
        userInfo.value.phone = userInfo.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
}

onLoad((options) => {
    // console.log('options',options)
    // if (options.userId) {
        
    // }
})




onShareAppMessage(()=>{
	return {
        title:'玖盛谷',
        desc:'玖盛谷',
        imageUrl:sharePath2.value,
        path: '/pages/poster/index?shareUserId=' + userInfo.value.userId
    }
})

//分享朋友圈
onShareTimeline(()=>{ 
    return {
        title:'玖盛谷',
        desc:'玖盛谷',
        imageUrl:sharePath2.value,
        path: '/pages/poster/index?shareUserId=' + userInfo.value.userId
    }
})

const smallCodePath = ref('')
// 分享相关方法
const share = () => {

    if(!isLogin.value){
        toast('请先登录')
        setTimeout(()=>{
            goToLogin()
        },500)
        return
    }

    showModal.value = true

    // setTimeout(()=>{
    //     isShowQrcode.value = true
    //     console.log('uqrcode')
    // },300)

    if(smallCodePath.value) return

    getMiniCodeApi({
        path: '/pages/poster/index',
        userId: userInfo.value.userId
    }).then(res=>{
        console.log('获取小程序码',res)
        smallCodePath.value = res.result
    })
}




const goToPoster = () => {
    if(!isLogin.value){
        toast('请先登录')
        setTimeout(()=>{
            goToLogin()
        },1000)
        return
    }
    uni.navigateTo({
        url: '/pages/poster/index'
    })
}

const savePoster = () => {
    // 先下载网络图片到本地临时路径

    // uqrcodeImg.value.save({
    //     success: (res) => {
    //         console.log('获取canvas到临时路径',res)
    //         uni.showToast({
    //             title: '保存成功,请在相册中查看',
    //             icon: 'success'
    //         })
    //         setTimeout(()=>{
    //             closeModal()
    //         },1000)
    //     },
    //     fail: (err) => {
    //         console.log('获取canvas到临时路径失败',err)
    //         uni.showToast({
    //             title: '保存失败,请稍后重试',
    //             icon: 'none'
    //         })
    //     }
    // })
    
    // return
    uni.downloadFile({
        url: smallCodePath.value,
        success: (res) => {
            if (res.statusCode === 200) {
                // 下载成功后保存到相册
                uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: () => {
                        toast('保存成功')
                    },
                    fail: (err) => {
                        console.log('err', err)
                        toast('保存失败')
                    }
                })
            }
        },
        fail: (err) => {
            console.log('下载失败', err)
            toast('下载失败')
        }
    })
} 

const closeModal = () => {
    showModal.value = false
}


const goStore = () => {
    uni.switchTab({
        url: '/pages/store/index'
    })
}

const goToLogin = () =>{
    uni.navigateTo({
        url:'/pages/Login/Login'
    })
}


// 生命周期
onShow(() => {
    getUserInfo()
    getSharePathApi().then(res=>{
        console.log('获取分享路径',res)
        sharePath1.value = res.result.image1
        sharePath2.value = res.result.image2
    })
})
</script>

<style lang="scss">
page {
    background: #f5f6f8;
}

.qrcode {
    // width: 100%;
    width: 400rpx;
    height: 400rpx;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    left: 50%;
    // bottom: 240rpx;
    transform: translate(-50%,-50%);
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // box-sizing: border-box;
    // z-index: 999;

}
.qrcodeBox_content{
    width: 80vw;
    height: 400rpx;
    display: flex;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    
}
.qrcodeBox_content_title{
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
}
.content {
    /* width: 690rpx; */
}
.user_phone{
    font-size: 28rpx;
    color: #999999;
    padding-left: 16rpx;
}
.banner {
    width: 100%;
    height: 596rpx;
}

.menusBox {
    width: 690rpx;
    position: absolute;
    top: 650rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding-bottom: 20rpx;
}

.userinfoBox {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(90deg, #21262c 0%, #333238 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx;
    box-sizing: border-box;
}

.userinfo {
    width: 50%;
    height: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #d9b777;
}

.authLoginBtn {
    width: 150rpx;
    height: 50rpx;
    background: #eacb92;
    border-radius: 80rpx 80rpx 80rpx 80rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #2b2e35;
    line-height: 50rpx;
    text-align: center;
}

.store_item {
    width: 50%;
    height: 50%;
    margin: 20rpx 0;
}

.store_item .label,
.tips {
    text-align: center;
    color: #000000;
    font-weight: bold;
    font-size: 36rpx;
}

.store_item .tips {
    color: #999999;
    font-size: 26rpx;
    text-align: center;
    padding-top: 5rpx;
}

.imgBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.store_item .iconImg {
    max-width: 170rpx;
    max-height: 170rpx;
}

.four_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.functionBox {
    width: 690rpx;
    position: absolute;
    top: 1175rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

.functionItem {
    width: 216rpx;
    height: 234rpx;
    padding-top: 20rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.f_label {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    color: #000000;
}

.f_tip {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    padding-top: 5rpx;
}

.f_imgBox {
    width: 100%;
    display: flex;
    justify-content: center;
}

.f_imgBox_icon {
    width: 84rpx;
    height: 84rpx;
    margin-top: 40rpx;
    border: 1rpx dashed #999999;
}

.activityImage {
    width: 690rpx;
    height: 200rpx;
    position: absolute;
    top: 1004rpx; 
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 28rpx;
}

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-content {
    width: 75%;
    height: 60vh;
    position: relative;
}

.content-bg {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}



.hidden-canvas {
    position: absolute;
    left: -9999px;
}

.button-group {
    position: absolute;
    bottom: 160rpx;
    width: 70%;
    display: flex;
    justify-content: space-between;
}

.groupBtn {
    text-align: center;
    font-size: 28rpx;
    background-color: #ffffff;
    border-radius: 50rpx;
    padding: 20rpx 50rpx;
    border: none;
    outline: none;
    margin: 0;
    line-height: 1;
    overflow: visible;
    text-decoration: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.recordList {
    position: absolute;
    width: 46rpx;
    height: 140rpx;
    padding-top: 10rpx;
    text-align: center;
    right: 0;
    background-color: #001c71;
    bottom: 100rpx;
    color: #fff;
    border-top-left-radius: 24rpx;
    font-size: 24rpx;
    border-bottom-left-radius: 24rpx;
}
</style>
